<template>
	<h-dark :title="t('pwd.chLoginPwd')"></h-dark>
	<view class="flex flex-col items-center px-[30rpx] box-border">
		<view class="w-full">
			<u-form :border-bottom="false"  :label-width="150" label-position="top">
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.oldPwd')" :border-bottom="false">
					<u-input class="flex-1" type="password" v-model="formData.old_password" :border="false"
						:placeholder="t('pwd.oldPwdPlaceholder')" />
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.newPwd')" :border-bottom="false">
					<u-input class="flex-1" type="password" v-model="formData.password" :placeholder="t('pwd.newPwdPlaceholder')"
						:border="false" />
				</u-form-item>
				<u-form-item :itemStyle="{'background':'#3d4277'}" :label="t('pwd.confirmPwd')" :border-bottom="false">
					<u-input class="flex-1" type="password" v-model="formData.password_confirm" :placeholder="t('pwd.confirmPwdPlaceholder')"
						:border="false" />
				</u-form-item>
			</u-form>
			<view class="mt-[100rpx]">
				<u-button type="primary" :disabled="formData.old_password==''||formData.password==''||formData.password_confirm==''" @click="handleConfirm"> {{t('common.submit')}} </u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { userChangePwd } from '@/api/user'
	import { reactive } from 'vue'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('pwd.titleChangePwd') })
	const formData = reactive<any>({
		old_password:'',
		password: '',
		password_confirm: ''
	})

	const handleConfirm = async () => {
		if (!formData.old_password) return uni.$u.toast(t('pwd.oldPwdEmpty'))
		if (!formData.password) return uni.$u.toast(t('pwd.newPwdEmpty'))
		if (!formData.password_confirm) return uni.$u.toast(t('pwd.confirmPwdEmpty'))
		if (formData.password != formData.password_confirm) return uni.$u.toast(t('pwd.twoPwdError'))
		await userChangePwd(formData)
		uni.$u.toast(t('network.modifySuccessfully'))
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
</script>

<style lang="scss">
</style>